<template>
  <div class="add-or-update">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">
      <el-form-item label="上级部门:" prop="parentName">
        <el-popover
          v-model= "popoverVisible"
          ref="deptListPopover"
          placement="bottom-start"
          trigger="click">
          <div class="selector">
              <el-tree
                :data="deptList"
                :props="array"
                node-key="id"
                ref="deptListTree"
                @current-change="deptListTreeCurrentChangeHandle"
                :default-expand-all="true"
                :highlight-current="true"
                :expand-on-click-node="false">
              </el-tree>
          </div>
        </el-popover>
        <el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" placeholder="点击选择上级部门" class="menu-list__input"></el-input>
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input placeholder="请输入名称" v-model="dataForm.name">
        </el-input>
      </el-form-item>
      <el-form-item label="排序码:" prop="sort">
        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input type="textarea" placeholder="请输入备注" :rows=4>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        <el-button  @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>


</template>

<script>
export default {
  data () {
    return {
      popoverVisible: false,
      loading: false,
      dataForm: {
        id: 0,
        parentId: 0,
        parentName: '',
        name: '',
        sort: 0
      },
      dataRule: {
        parentName: [
          { required: true, message: '上级部门不能为空', trigger: 'change' }
        ],
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' }
        ]
      },
      deptList: [],
      counter: 0,
      array: {
        value: 'id',
        label: 'name'
      }
    }
  },
  activated () {
    let id = this.$route.params.id || 0
    console.log('id', id)
    this.dataForm.id = id
    this.init(id)
  },
  methods: {
    // 先初始化表单，然后根据是新增还是修改对表单中的字段进行处理
    init (id) {
      this.loading = true
      this.dataForm.id = id || 0
      console.log(this.dataForm.id)
      this.$http({
        url: this.$http.adornUrl('/sysDept/query/select'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.loading = false
        let dept = {
          id: '-1',
          name: '顶级部门',
          children: []
        }
        dept.children = data
        this.deptList = []
        this.deptList.push(dept)
      })
        .then(() => {
          if (this.dataForm.id) {
            this.loading = true
            // 修改
            this.$http({
              url: this.$http.adornUrl(`/sysDept/query/detail`),
              method: 'get',
              params: this.$http.adornParams({ id: id })
            }).then(({ data }) => {
              this.loading = false
              this.dataForm.name = data.name
              this.dataForm.parentId = data.parentId
              this.dataForm.sort = data.sort
              this.deptListTreeSetCurrentNode()
            })
          } else {
            // 新增
            this.resetForm('dataForm')
          }
        })
    },
    // 表单重置
    resetForm (formName) {
      this.loading = true
      this.$refs[formName].resetFields()
      this.loading = false
    },
    // 菜单树选中
    deptListTreeCurrentChangeHandle (data, node) {
      this.dataForm.parentId = data.id
      this.dataForm.parentName = data.name
      this.popoverVisible = false
    },
    // 菜单树设置当前选中节点
    deptListTreeSetCurrentNode () {
      this.$refs.deptListTree.setCurrentKey(this.dataForm.parentId)
      this.dataForm.parentName = (this.$refs.deptListTree.getCurrentNode() ||
        {})['name']
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl('/sysDept/save'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
            data: this.$http.adornData(
              {
                id: this.dataForm.id || undefined,
                name: this.dataForm.name,
                parentId: this.dataForm.parentId,
                sort: this.dataForm.sort
              }, false,
              'form')
          }).then(() => {
            this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500  // 持续时间
            })
            this.$router.push({name: 'sys-dept'})
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
